<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<%@ taglib prefix="ta" tagdir="/WEB-INF/tags/tatags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>消息统计</title>
    <%@ include file="/ta/inc.jsp" %>
    <script type="text/javascript" src="<%=basePath%>indexue/js/echarts-3.6.2.min.js"></script>
</head>
<body>
<ta:pageloading/>
<ta:panel key="查询条件" cols="4" id="params">
    <ta:selectInput id="sendType" key="消息类型" collection="SENDMODE"/>
    <ta:date id="startDate" key="起始时间" showSelectPanel="true" value="${start}" datetime="true"></ta:date>
    <ta:date id="endDate" key="截止时间" showSelectPanel="true" validNowTime="left" value="${end}"
             datetime="true"></ta:date>
    <ta:buttonLayout>
        <ta:button id="qry" isok="true" key="按天" onClick="messagesStatistic()"/>
        <ta:button id="qryh" key="按小时" onClick="messagesStatisticByH()"/>
        <%--<ta:button id="switch" key="生成饼图" onClick="createPie()"/>--%>
    </ta:buttonLayout>
</ta:panel>
<ta:panel key="统计结果" fit="true">
    <ta:box id="taLoganalysis_ol" cssStyle="height:300px;padding:0px 0px;"></ta:box>
</ta:panel>
<ta:panel key="统计结果" fit="true" cols="2">
    <ta:box id="taLoganalysis_pie" columnWidth="60%" cssStyle="height:300px;padding:0px 0px;"></ta:box>
    <ta:box id="taLoganalysis_dpie" columnWidth="40%" cssStyle="height:300px;padding:0px 0px;"></ta:box>
</ta:panel>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("body").taLayout();
        messagesStatistic();
    });
    var e1 = document.getElementById('taLoganalysis_ol');
    var e2 = document.getElementById('taLoganalysis_pie');
    var de = document.getElementById('taLoganalysis_dpie');
    var ur1 = "${basePath}messageStatistic/statistic.do";
    var ur2 = "${basePath}messageStatistic/statisticByH.do";
    var dur = "${basePath}messageStatistic/statisticTypes.do";
    function messagesStatistic() {
        clear(de);
        $('#qryh span').removeClass('isok');
        $('#qry span').addClass('isok');
        fnH(e1, ur1, 'line', 'day');
        fnH(e2, ur1, 'pie', 'day');
    }
    function messagesStatisticByH() {
        clear(de);
        var start = Base.getValue('startDate');
        var end = Base.getValue('endDate');
        if (start && end) {
            if (start.substring(0, 10) == end.substring(0, 10)) {
                $('#qry span').removeClass('isok');
                $('#qryh span').addClass('isok');
                fnH(e1, ur2, 'line', 'hour');
                fnH(e2, ur2, 'pie', 'hour');
            } else {
                Base.alert("所选起始时间和截止时间必须在同一天", "error");
            }
        } else {
            Base.alert("请选择起始时间和截止时间", "error");
        }
    }
    function fnH(e, ur, type, way) {
        var myChart = clear(e);
        myChart.showLoading({
            text: '正在努力的读取数据中...',
        });
        var start = Base.getValue('startDate');
        var end = Base.getValue('endDate');
        var param = {
            "dto['startDate']": start,
            "dto['endDate']": end,
            "dto['sendType']": Base.getValue('sendType'),
        };
        var data = Base.getJson(ur, param);
        var seriesData = eval(data.fieldData.result);
        var dates = eval(data.fieldData.dates);
        var start_1 = data.fieldData.kssj;
        var end_1 = data.fieldData.jssj;
        Base.setValue('startDate', start_1)
        Base.setValue('endDate', end_1)
        myChart.hideLoading();
        if (type == 'line') {
            myChart.setOption(getLineOption(seriesData, dates, way));
        } else if (type == 'pie') {
            myChart.setOption(getPieOption(seriesData, dates, way));
            myChart.on('click', function (params) {
                fnDPie(de, dur, params, way, start_1);
            });
        }
    }
    function fnDPie(e, ur, params, way, start_1) {
        var myChart = clear(e);
        myChart.showLoading({
            text: '正在努力的读取数据中...',
        });
        var dat = params.data.name;
        var par_s = '';
        var par_e = '';
        if (way == 'hour') {
            dat = start_1.substring(0, 10) + " " + dat.substr(0, dat.indexOf('时'));
            par_s = dat + ":00:00";
            par_e = dat + ":59:59";
        } else {
            par_s = dat + " 00:00:00";
            par_e = dat + " 23:59:59";
        }
        var _para = {
            "dto['begin']": par_s,
            "dto['end']": par_e,
            "dto['sendType']": Base.getValue('sendType')
        };
        var _data = Base.getJson(dur, _para);
        myChart.hideLoading();
        var seriesData = _data.fieldData.result;
        var types = _data.fieldData.types;
        myChart.setOption(getDetailPieOption(seriesData, types));
    }
    function getLineOption(seriesData, dates, way) {
        var values = [];
        var dates_2 = [];
        var len = seriesData.length;
        var len2 = dates.length;
        for (var n = 0; n < len2; n++) {
            var d = dates[n];
            dates_2[n] = dates[n].substring(11) + '时';//小时格式化
            values[n] = 0;
            for (var k = 0; k < len; k++) {
                var ty = seriesData[k].type
                var count = seriesData[k].count
                if (d == ty) {
                    values[n] = count;
                }
            }
        }
        var option = {
            title: {
                text: '消息发送数量统计',
                x: 'center',
                y: 'top'
            },
            legend: {                                   // 图例配置
                data: ['消息发送数量'],
                x: '70%',
                y: 'top',
            },
            tooltip: {                                  // 气泡提示配置
                trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
                formatter: '{a}<br/>{b} 共{c}条'
            },
            toolbox: {
                show: true,
                feature: {
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            xAxis: [                                    // 直角坐标系中横轴数组
                {
                    type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                    data: way == 'day' ? dates : dates_2,
                    axisLabel: {
                        interval: 0,
                        rotate: way == 'day' ? 70 : 0,

                    }
                }
            ],
            grid: {
                x: 70,
                x2: 70,
                y2: 40,
            },
            yAxis: [                                    // 直角坐标系中纵轴数组
                {
                    type: 'value',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
                    axisLabel: {
                        formatter: '{value} 条'
                    }
                }
            ],
            series: [
                {
                    name: '消息发送数量',                        // 系列名称
                    type: 'line',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    data: values,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };
        return option;
    }
    function getPieOption(seriesData, dates, way) {
        var values = [];
        var dates_2 = [];
        var len = seriesData.length;
        var len2 = dates.length;
        for (var n = 0; n < len2; n++) {
            var d = dates[n];
            dates_2[n] = dates[n].substring(11) + '时';//小时格式化
            values[n] = {value: 0, name: way == 'day' ? d : dates_2[n]};
            for (var k = 0; k < len; k++) {
                var ty = seriesData[k].type
                var count = seriesData[k].count
                if (d == ty) {
                    values[n] = {value: count, name: way == 'day' ? d : dates_2[n]};
                }
            }
        }
        var option = {
            title: {
                text: '发送消息数量统计',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} 共{c}条 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: way == 'day' ? dates : dates_2
            },
            series: [
                {
                    name: '发送消息数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '66%'],
                    data: values,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        return option;
    }
    function getDetailPieOption(seriesData, types) {
        var values = [];
        var len = seriesData.length;
        var len2 = types.length;
        for (var n = 0; n < len2; n++) {
            var d = types[n];
            values[n] = {value: 0, name: d};
            for (var k = 0; k < len; k++) {
                var ty = seriesData[k].type
                var count = seriesData[k].count
                if (d == ty) {
                    values[n] = {value: count, name: d};
                }
            }
        }
        var option = {
            title: {
                text: '消息类型数量统计',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} 共{c}条 ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: types
            },
            series: [
                {
                    name: '消息类型数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '66%'],
                    data: values,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        return option;
    }
    function clear(e) {
        var myChart = echarts.init(e);
        myChart.clear();
        return myChart;
    }
</script>
<%@ include file="/ta/incfooter.jsp" %>